<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>题库管理</el-breadcrumb-item>
      <el-breadcrumb-item>多选题创编</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-form label-width="100px" ref="formRef" :model="form" :rules="formRules">
        <el-form-item label="章节：" prop="chapterId">
          <el-select v-model="form.chapterId">
            <el-option v-for="item in chapters" :key="item.chapterId" :value="item.chapterId" :label="item.chapterName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题干：" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>
        <el-form-item label="选项：" prop="items">
          <el-form-item 
            :key="item.prefix" 
            v-for="(item, index) in form.items" 
            label-width="50px"
            class="question-item-label">
            <el-input v-model="item.prefix" style="width:50px;"/>
            <el-input v-model="item.content" class="question-item-content-input"/>
            <el-button type="danger" size="mini" class="question-item-remove" icon="el-icon-delete" @click="questionItemRemove(index)"></el-button>
          </el-form-item>
        </el-form-item>
        <el-form-item label="标答：" prop="correctArray">
          <el-checkbox-group v-model="form.correctArray">
            <el-checkbox v-for="item in form.items" :label="item.prefix" :key="item.prefix">{{item.prefix}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="解析：" prop="analyze">
          <el-input v-model="form.analyze" />
        </el-form-item>
        <el-form-item label="分数：" prop="score">
          <el-input-number v-model="form.score" :precision="1" :step="1" :max="100" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
          <el-button type="success" @click="questionItemAdd">添加选项</el-button>
          <el-button type="success" @click="showQuestion">预览</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog :visible.sync="questionShow.dialog" style="width: 100%; height: 100%">
      <QuestionShow :qType="questionShow.qType" :question="questionShow.question"/>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import QuestionShow from './Show'
import questionApi from '@/api/question'
export default {
  components: {
    QuestionShow
  },
  data() {
    return {
      form: {
        level: undefined,
        chapterId: undefined,
        questionType: 2,
        title: '',
        items: [
          { prefix: 'A', content: '' },
          { prefix: 'B', content: '' },
          { prefix: 'C', content: '' },
          { prefix: 'D', content: '' }
        ],
        analyze: '',
        correct: '',
        correctArray: [],
        score: '',
      },
      formRules: {
        chapterId: [
          { required: true, message: '请选择章节', trigger: 'change' }
        ],
        title: [
          { required: true, message: '请输入题干' }
        ],
        items: [
          { required: true, message: '请提供选项' }
        ],
        correctArray: [
          { required: true, message: '请选择正确答案', trigger: 'change' }
        ],
        analyze: [
          { required: true, message: '请输入解析' }
        ],
        score: [
          { required: true, message: '请输入分数' }
        ],
      },
      questionShow: {
        qType: 0,
        dialog: false,
        question: null,
      },
    }
  },
  props: {
    mainLevel: {
      type: Number
    }
  },
  watch: {
    mainLevel() {
      this.form.level = this.mainLevel
      this.resetForm()
    }
  },
  created() {
    this.form.level = this.mainLevel
    let id = this.$route.query.id
    let _this = this
    if (id && parseInt(id) !== 0) {
      questionApi.select(id).then(re => {
        _this.form = re.response
      })
    }
  },
  methods: {
    resetForm () {
      let lastId = this.form.id
      this.$refs.formRef.resetFields()
      this.form = {
        id: null,
        questionType: 2,
        chapterId: null,
        title: '',
        items: [
          { prefix: 'A', content: '' },
          { prefix: 'B', content: '' },
          { prefix: 'C', content: '' },
          { prefix: 'D', content: '' }
        ],
        correct: '',
        correctArray: [],
        analyze: '',
        score: '',
      }
      this.form.id = lastId
    },
    questionItemAdd () {
      let items = this.form.items
      let newLastPrefix
      if (items.length > 0) {
        let last = items[items.length - 1]
        newLastPrefix = String.fromCharCode(last.prefix.charCodeAt() + 1)
      } else {
        newLastPrefix = 'A'
      }
      items.push({ id: null, prefix: newLastPrefix, content: '' })
    },
    questionItemRemove (index) {
      this.form.items.splice(index, 1)
    },
    showQuestion () {
      this.questionShow.dialog = true
      this.questionShow.qType = this.form.questionType
      this.questionShow.question = this.form
    },
    submitForm () {
      let _this = this
      this.$refs.formRef.validate((valid) => {
        if (!valid) return false
        questionApi.edit(this.form).then(re => {
          if (re.code === _this.ok.code) {
            _this.$message.success(re.message)
            _this.$router.push('/question/list')
          } else {
            _this.$message.error(re.message)
          }
        })
      })
    },
  },
  computed: {
    ...mapState('chapter', {
      chapters: state => state.chapters
    }),
    ...mapState('resCode', {
      ok: state => state.OK
    }),
  }
}
</script>

<style lang="less" scoped>

</style>